<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0 auto;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 1000px;
            height: 700px;
            background-color: violet;
        }
        .box1{
            width: 100%;
            height: 400px;
            background-color: turquoise;
        }
        .y{
            width: 600px;
            height: 100%;
            float: left;
            background-color: aqua;
        }
        .y .imgs{
            width: 600px;
            height: 250px;
        }
        .yi{
            width: 600px;
            height: 150px;
        }
        .y dl{
            float: left;
            
        }
        .y dl img{
            width: 200px;
            height: 100px;
        }
        .e{
            width: 400px;
            height: 100%;
            float: left;
            background-color: blanchedalmond;
        }
        .e li{
            line-height: 30px;
        }
        .box2{
            width: 100%;
            height: 300px;
            background-color: yellow;
        }
        .b1{
            width: 100%;
            height: 50px;
            background-color: blueviolet;
            line-height: 47px;
        }
        .b1 p{
            float: left; 
            margin-left: 30px;
            color: white;
        }
        .b2{
            width: 100%;
            width: 250px;
            
        }
        .qq{
            width: 100%;
            height: 250px;
        }
        .on{
            color: yellow;
        }
    </style>
</head>
<body>
  
    <div class="box">
            <div class="box1">
                <div class="y">
                    <img src="./img/八维_03.gif" alt="" class="imgs">
                    <div class="yi"></div>
                </div>
                <div class="e"></div>
            </div>
            <div class="box2">
                <div class="b1"></div>
                <div class="b2"></div>
            </div>
    </div>
    <script>
        var arr=[
            {'url':'./img/a_03.gif','wz':'哈哈哈哈哈'},
            {'url':'./img/a_05.gif','wz':'哈哈哈哈哈'},
            {'url':'./img/a_07.gif','wz':'哈哈哈哈哈'}
        ]
        var brr=[
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'},
            {'wz':'啦啦啦啦啦啦啦啦绿绿绿绿绿绿'}
        ]
        var crr=[
            {'a':'合作单位','b':['./img/1.jpg']},
            {'a':'院校分布','b':['./img/2.jpg']},
            {'a':'友情链接','b':['./img/3.jpg']},
        ]
        function Big(obj){
            Object.assign(this,obj)
            this.init();
        }
        Big.prototype={
            constructor:Big,

            init:function(){
                this.index=0;
                this.move();
                this.Lb();
                this.Tep();
            },
            move:function(){
                var that=this;
                this.yi.innerHTML=that.arr.map((v,i)=>{
                    return `
                        <dl>
                            <dt><img src='${v.url}'></dt>
                            <dd>${v.wz}</dd>    
                        </dl>
                    `
                }).join('')
            },
            Lb:function(){
                var that=this;
                this.e.innerHTML=that.brr.map((v,i)=>{
                    return `<li>${v.wz}</li>`
                }).join('')

                this.e.addEventListener('mouseover',(e)=>{
                    var t=e.target;
                    if(t.nodeName=='LI'){
                        t.style.color='red'
                    }
                })
                this.e.addEventListener('mouseout',(e)=>{
                    var t=e.target;
                    if(t.nodeName=='LI'){
                        t.style.color='#000'
                    }
                })

            },
            Tep:function(){
                var that=this;
                this.b1.innerHTML=that.crr.map(function(v,i){
                    return `<p>${v.a}</p>`
                }).join('');

                var drr=crr[0].b;
                this.b2.innerHTML=drr.map((v,i)=>{
                    return `<span><img src='${v}' class='qq'></span>`
                }).join('')

                var ps=document.querySelectorAll('.b1 p')
                this.box2.addEventListener('click',(e)=>{
                    var t=e.target;
                    if(t.tagName=='P'){
                        
                        [...ps].forEach((v,i)=>{
                            v.classList.remove('on')
                        })
                            t.classList.add('on')

                        var index=[...ps].indexOf(t);
                        var drr=crr[index].b;
                        this.b2.innerHTML=drr.map((v,i)=>{
                        return `<span><img src='${v}' class='qq'></span>`
                    }).join('')
                    }
                })      
               

            }


        }
        new Big({
            y:document.querySelector('.y'),
            yi:document.querySelector('.yi'),
            e:document.querySelector('.e'),
            box:document.querySelector('.box'),
            box2:document.querySelector('.box2'),
            b1:document.querySelector('.b1'),
            b2:document.querySelector('.b2'),
            arr:arr,
            brr:brr,
            crr:crr
        })
    </script>
</body>
</html>